<template>
  <div class="w100 flex-x flex-top h-full">
    <div :key="mixinBoderKey" style="width: 100%; padding: 5px 10px">
      <Search :deviceData="deviceData" @onSubmit="onSearch"></Search>
      <div class="flex-x flex-top flex-space">
        <div style="width: 40%" class="left_chart" v-init-screen-h="10">
          <TypeChart
            :countAllObj="countAllObj"
            class="w100"
            style="height: 45%"
            :activeName="activeName"
          ></TypeChart>
          <TrendChart
            :alarmStateList="alarmStateList"
            class="w100"
            style="height: 55%"
            :activeName="activeName"
          ></TrendChart>
        </div>
        <div style="width: 58%">
          <WarningTable
            :tableData="tableData"
            style="width: 100%"
          ></WarningTable>
          <Pagination
            class="dark_theme"
            @pagination="pagination"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
            :pageSizes.sync="pageSizes"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TreeBox from "../../deviceOperation/components/TreeBox.vue";
import Search from "./components/Search.vue";
import TrendChart from "./components/TrendChart.vue";
import TypeChart from "./components/TypeChart.vue";
import WarningTable from "./components/WarningTable.vue";
import { mixinOpenedKey } from "@/mixin/openedKey.js";
import Pagination from "@/views/common/page";
import { paginationMixins } from "@/mixin/pagination";
import { getAlarmHistoryInfos, AlarmStatInfo } from "@/api/alarm";
import { roundPercentageTotals } from "../../js/utils";
import { getDevicesV2 } from "@/api/device";
export default {
  mixins: [mixinOpenedKey, paginationMixins],
  components: {
    TreeBox,
    Search,
    TrendChart,
    WarningTable,
    TypeChart,
    Pagination
  },
  data() {
    return {
      tableData: [],
      searchForm: {},
      deviceData: [],
      alarmStateList: [], //统计
      countAllObj: {
        upLimitalarmCount: 0, //工艺越限报警数
        deviceWarmalarmCount: 0, //设备
        comWarmalarmCount: 0
      }
    };
  },
  props: {
    activeName: {
      type: String,
      default: ""
    }
  },
  mounted() {
    console.log("activeName :>> ", this.activeName);
    if (this.activeName == "历史报警查询") {
      this.init();
      this.getDevicesV2();
      this.getAlarmStatInfo();
    }
  },
  methods: {
    getCountAll(key) {
      const arr = this.alarmStateList.map(item => Number(item[key]));
      if (arr.length) {
        const num = arr.reduce(function(prev, curr, idx, arr) {
          return prev + curr;
        });
        return parseInt(num);
      } else {
        return 0;
      }
    },
    async getAlarmStatInfo() {
      const res = await AlarmStatInfo();
      const { results, numResults } = res.data;
      this.alarmStateList = results;

      this.countAllObj = roundPercentageTotals(
        this.getCountAll("upLimitalarmCount"),
        this.getCountAll("deviceWarmalarmCount"),
        this.getCountAll("comWarmalarmCount")
      );
      // 597/1771*100
    },
    getDevicesV2() {
      getDevicesV2({
        // manufactureSite: "常规热处理单元"
      })
        .then(res => {
          const r = res.data;
          this.deviceData = r.results.map(item => {
            return {
              ...item.idevice
              // ...item.user,暂时不需要
            };
          });
          console.log("获取所有的设备 :>> ", this.deviceData);
        })
        .finally(f => {});
    },
    // 搜索
    onSearch(search) {
      if (search) {
        this.searchForm = search;
      } else {
        this.searchForm = {};
      }
      this.init();
    },
    async init() {
      const res = await getAlarmHistoryInfos({
        page: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchForm
      });
      const { results, numResults } = res.data;
      console.log("历史报警信息 :>> ", this.tableData);
      this.tableData = results;
      this.total = numResults;
    }
  }
};
</script>

<style lang="scss" scoped>
.left_chart {
  overflow: hidden !important;
}
</style>
